import React, { Component } from 'react';
import Record from './components/Record';
// jQuery 库中 有太多的属性和方法，引入之后很多都不会使用所以需要优化
// import $ from 'jquery';
// import { getJSON } from 'jquery';
// import axios from 'axios';
import * as RecordAPI from './utils/Config';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      records: [],
      error: null,
      isLoaded: false
    }
  }

  componentDidMount() {
    // 请求数据
    // $.getJSON('http://5b67a538f793e000145625fa.mockapi.io/api/v2/records')
    // .then(response=>{
    //   this.setState({
    //     records: response
    //   })
    // },
    //   error=>console.log(error)
    // )

    // getJSON('http://5b67a538f793e000145625fa.mockapi.io/api/v2/records')
    //   .then(response => {
    //     this.setState({
    //       records: response,
    //       isLoaded: true
    //     })
    //   },
    //     error => this.setState({
    //       isLoaded: true,
    //       error
    //     })
    //   )

    // axios.get('http://5b67a538f793e000145625fa.mockapi.io/api/v2/records')
    // .then(response => {     
    //   this.setState({
    //     records: response.data,
    //     isLoaded: true
    //   })
    // })
    // .catch(error => {
    //   this.setState({
    //     isLoaded: true,
    //     error
    //   })
    // });

    // axios.get(`${RecordAPI.api}/api/v2/records`)
    //   .then(response => {
    //     this.setState({
    //       records: response.data,
    //       isLoaded: true
    //     })
    //   })
    //   .catch(error => {
    //     this.setState({
    //       isLoaded: true,
    //       error
    //     })
    //   });


    RecordAPI.getRecords().then(response => {
      this.setState({
        records: response.data,
        isLoaded: true
      })
    })
    .catch(error => {
      this.setState({
        isLoaded: true,
        error
      })
    });
  }


  render() {
    const { error, isLoaded, records } = this.state;

    if (error) {
      // return <div>Error:{error.responseText}</div>
      return <div>Error:{error.message}</div>
    } else if (!isLoaded) {
      return <div>Loading......</div>
    } else {
      return (
        <div>
          <h2>小型财务管理系统</h2>
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>日期</th>
                <th>内容</th>
                <th>总计</th>
              </tr>
            </thead>
            <tbody>
              {/* {this.state.records.map((item) =><Record key={item.id} record={item} />)} */}
              {records.map((item) => <Record key={item.id} {...item} />)}
            </tbody>
          </table>
        </div>
      );
    }
  }
}

